<template>

    <el-container>
        <el-header id="manageHeader" height="90px">
            <!-- 搜索表单 -->
            <el-form :inline="true" :model="searchBase" class="demo-form-inline" style="margin-top: 1.5%;">
                <el-form-item label="著作名">
                    <el-input v-model="searchBase.opusName" placeholder="著作名" style="width: 120px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="出版时间">
                    <el-date-picker v-model="OpusDate" type="monthrange" range-separator="至" start-placeholder="开始月份"
                        end-placeholder="结束月份" value-format="yyyyMMdd" style="width: 200px;">
                    </el-date-picker>
                </el-form-item>
                  <el-form-item label="出版社">
                    <el-input v-model="searchBase.publicer" placeholder="方向名称" style="width: 120px;">
                    </el-input>
                </el-form-item>
                   <el-form-item label="学院">
                    <el-select v-model="value1" style="width:100px" placeholder="请选择" :disabled="value2==''?false:true">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="value2" style="width:90px" placeholder="请选择" :disabled="value1==''?false:true">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onsubmit">查询</el-button>
                </el-form-item>
                <!-- 导出数据为Excel-->
                <!-- <el-form-item>
                    <el-button type="primary">导出Excel</el-button>
                </el-form-item> -->
            </el-form>
        </el-header>
        <el-main>
            <template>
                <el-table :data="OpusData" style="width: 100%">
                
                    <el-table-column prop="opusName" label="著作名" align="center">
                    </el-table-column>
                    <el-table-column prop="publicer" label="出版社" align="center">
                    </el-table-column>
                    <el-table-column prop="opuscategory" label="类别" align="center">
                    </el-table-column>
                    <el-table-column prop="opuslevel" label="等级" align="center">
                    </el-table-column>
                    <el-table-column prop="opusperson" label="参与人员" align="center">
                    </el-table-column>
                 <el-table-column prop="opusDate" label="时间" align="center">
                    </el-table-column>
                    <el-table-column prop="opusdetail" label="著作说明" align="center">
                    </el-table-column>
                    <el-table-column prop="academyName" label="学院" align="center">
                    </el-table-column>
                     <el-table-column prop="departmentName" label="部门" align="center">
                    </el-table-column>
                </el-table>
            </template>
            <!--分页工具条-->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" 
                layout="total, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>

        </el-main>
    </el-container>
</template>

<script>
import axios from "axios";

export default {
    name: 'LeaderOpus',
    data() {
        return {
            
            // 搜索的表单
            searchBase: {
                opusName: "",
                publicer:"",
               academyName:"",
               departmentName:""
            }, 
               // 学院下拉框
            options1: [{
                value: '计算机学院',
                label: '计算机学院'
            }, {
                value: '外国语学院',
                label: '外国语学院'
            }, {
                value: '软件学院',
                label: '软件学院'
                }, {
                    value: '',
                    label: '无'
                }],
            value1: '',
            // 部门下拉框
            options2: [{
                value: '教务处',
                label: '教务处'
            }, {
                value: '研究生处',
                label: '研究生处'
            }, {
                value: '教师工作部',
                label: '教师工作部'
                }, {
                    value: '',
                    label: '无'
                }],
            value2: '',
            // 统计表格数据
            OpusData: [],
           OpusDate:'',
            // 分页
            totalCount: 0,

            // 当前页码
            currentPage: 1,
            pageSize: 7,
        }

    },
    mounted() {
        this.selectAll();
    },
    methods: {
        onsubmit() {
              this.searchBase.academyName=this.value1
            this.searchBase.departmentName=this.value2
            this.selectAll()

        },
        selectAll() {
            axios({
                method: "post",
                url: " http://localhost:8888/lead_Opus/selectByPage?currentPage=" + 
                this.currentPage + "&pageSize=" + this.pageSize +  "&OpusDate=" + this.OpusDate,
                data: this.searchBase
            }).then(resp => {
                this. OpusData = resp.data.data.rows;
                this.totalCount = resp.data.data.totalCount;
            })
        },


        // 分页操作
        handleSizeChange(val) {
            this.pageSize = val;
            this.selectAll();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.selectAll();
        }
    },
}


</script>

<style>
</style>